<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>




    <h1>兼容 ie  </h1>
    <h1>    必知必会    </h1>


    <style>
        button {
            cursor: pointer;
            padding: 23px;
            background: darksalmon;
        }

        .modal {
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            visibility: hidden;
            opacity: 0;
            transform: scale(1.2);
            transition: 0.3s;
        }
        .show-modal{
            visibility: visible;
            transform: scale(1);
            opacity: 1;
        }

        .content-box {
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%, -50%);
            width: 350px;
            background: white;
            padding: 12px 16px ;
            border-radius: 15px;
        }
        .close-btn{
            font-size: 35px;
            float: right;
            margin: 5px;
        }
        .close-btn:hover{
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    <Button class="open-modal">open modal</Button>

    <div class="modal">
        <div class="content-box">
            <span class="close-btn">&times;</span>
            <h1>title</h1>
            <h3>content...</h3>
        </div>
    </div>

    
    
<xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   
    关键代码: 
    .modal {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3);   =>  背景遮罩层 , 设置为 0.3 倍透明
        visibility: hidden;       =>   隐藏起来
        opacity: 0;
        transform: scale(1.2);     =>   先是放大 1.2 倍
        transition: 0.3s;
    }

    然后 , 通过 js :
    .show-modal{
        visibility: visible;     =>   展示
        transform: scale(1);     =>   后恢复到 1 (原始大小)
        opacity: 1;
    }


    var open_btn = document.querySelector(".open-modal")
    var close_btn = document.querySelector(".close-btn")
    var modal = document.querySelector(".modal")

    function toggle_fun(params) {
        modal.classList.toggle("show-modal");
    }

    open_btn.addEventListener("click", toggle_fun)
    close_btn.addEventListener("click", toggle_fun)
    window.addEventListener("click", function(eee) {
        if(eee.target == modal){
            toggle_fun();
        }
    })
</xmp>



    <h1 style="margin: 66px;">asdasd呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪个呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃gergergergergergergergergergergergergergergergergergergergergergergasdasd</h1>
    <h1 style="margin: 66px;">asdasd呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪个呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃gergergergergergergergergergergergergergergergergergergergergergergasdasd</h1>

</body>
<script>

    var open_btn = document.querySelector(".open-modal")
    var close_btn = document.querySelector(".close-btn")
    var modal = document.querySelector(".modal")
    
    function toggle_fun(params) {
        modal.classList.toggle("show-modal");
    }

    open_btn.addEventListener("click", toggle_fun)
    close_btn.addEventListener("click", toggle_fun)
    window.addEventListener("click", function(eee) {
        if(eee.target == modal){
            toggle_fun();
        }
    })

</script>
</html>